<template>
  <div>
    <!-- {{ valueArray }} -->

    <template v-for="option in options">
      <template v-if="valueArray.includes(option.value)">

        <!-- 文字模式 -->
        <span v-if="spanText" :key="option.value">
          {{ option.label }}
        </span>
        
        <!-- 标签模式 -->
        <Tag v-else :key="option.value" :color="typeClass(option)" style="margin: 2px;">
          {{ option.label }}
        </Tag>

      </template>
    </template>
  </div>
</template>

<script>
export default {
  name: "dictTag",
  props: {
    options: {
      type: Array,
      default: () => []
    },
    value: {
      type: [Number, String, Array],
      default: ""
    },
    spanText: {
      type: Boolean,
      default: false,
    }
  },
  mounted: function () {
    // console.log("dict-tag mounted... options:", this.options)
    // console.log("dict-tag mounted... value:", this.value)
  },
  computed: {
    valueArray: function () {
      if (this.value == null || this.value == undefined) return [];
      if (Array.isArray(this.value)) return this.value;
      else return `${this.value}`.split(',');
    },
    typeClass: function () {
      return (val) => {
        // val.raw.cssClass;
        const listClass = val.raw.listClass;
        let color;
        switch(listClass) {
          case "primary":
            color = 'blue';
            break;
          case "success":
            color = 'green';
            break;
          case "warning":
            color = 'gold';
            break;
          case "danger":
            color = 'red';
            break;
          default:
            color = 'default';
        }
        return color;
      }
    }
  }
}
</script>

<style scoped>
</style>
